<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.5/dayjs.min.js"></script>
</head>

<body>
    <div id="app">{{showTime}}
        <hr>
        {{date2}}
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    date: new Date(),
                    date2:dayjs().format('YYYY-MM-DD HH:mm:ss')
                }
            },
            methods: {
                addZero(n) {
                    return n < 10 ? '0' + n : '' + n;
                }
            },
            computed: {
                showTime() {
                    var year = this.date.getFullYear();//获取四位数的年
                    var month = this.date.getMonth() + 1;//获取月，月份数从0开始，所以+1
                    var date = this.date.getDate();//获取日
                    var day = this.date.getDay();//获取星期
                    switch (day)//将转换为中文的星期几
                    {
                        case 0: day = "星期日"; break;
                        case 1: day = "星期一"; break;
                        case 2: day = "星期二"; break;
                        case 3: day = "星期三"; break;
                        case 4: day = "星期四"; break;
                        case 5: day = "星期五"; break;
                        case 6: day = "星期六"; break;
                    }
                    var hours = this.date.getHours();//获取时
                    var minutes = this.date.getMinutes();//获取分
                    var seconds = this.date.getSeconds();//获取秒
                     return year + "年" + month + "月" + date + "日"  + day + this.addZero(hours) + ":" + this.addZero(minutes) + ":" + this.addZero(seconds);//将时间字符串，加入到id=time的元素中
                }
            },
            mounted() {
                setInterval(() => {
                    this.date=new Date();
                    this.date2=dayjs().format('YYYY-MM-DD HH:mm:ss');
                }, 1000);
            },
        }).mount("#app");
    </script>
</body>

</html>